<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--liuwen-->
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
<body>
<form action="/insert" method="post" enctype="multipart/form-data" >
    <table border="1" style="margin-left: 70px" >
        <tr>
            <td><div style="width: 150px;height: 500px;">

                <div id="localImag"><img id="preview" class="img-circle" src="http://blog.chuangling.net/Public/images/top.jpg" width="150" height="180" style="display: block; width: 150px; height: 180px;"></div>
                <input type="file"  name="file4" id="doc" style="width:150px;" class="d-none"  onchange="javascript:setImagePreview();" >
                <input type="button" class="btn btn-default" onclick="img()" value="上传文件" style="width:150px;">
            </div></td>
            <td><!--  你猜 -->

                <table   class="table table-striped" style="width: 1500px; " id="datas">
                    <tr>
                        <td colspan="3">
                            <input type="hidden" name="id">
                            <button class="btn btn-outline-secondary" style="width: 200px">返回</button>
                        </td>
                        <td><h5>单位ID:<input type="text" name="did">/登录</h5></td>
                    </tr>
                    <tr >
                        <td WIDTH="50">姓名</td>
                        <td><input type="text" ng-model="entity.name" name="name"  ></td>
                        <td WIDTH="100">身份证号码</td>
                        <td><input type="text" ng-model="entity.number" name="number" class="form-control"></td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td WIDTH="100px"><input name="sex" type="text" ng-model="entity.sex"></td>
                        <td>出生日期</td>
                        <td WIDTH="100px"><input name="birthday" type="date" ng-model="entity.birthday"></td>
                    </tr>
                    <tr>
                        <td>年龄</td>
                        <td WIDTH="100px"><input name="age" type="text" ng-model="entity.age"></td>
                        <td>身高</td>
                        <td WIDTH="100px"><input name="height" type="text" ng-model="entity.height"></td>
                    </tr>
                    <tr>
                        <td>体重</td>
                        <td WIDTH="100px"><input name="weight" type="text" ng-model="entity.weight"></td>
                        <td>左右手</td>
                        <td WIDTH="100px"><input name="hand" type="text" ng-model="entity.hand"></td>
                    </tr>
                    <tr>
                        <td>场上位置</td>
                        <td WIDTH="100px"><input name="location" type="text" ng-model="entity.location"></td>
                        <td>学号</td>
                        <td WIDTH="100px"><input name="student" type="text" ng-model="entity.student"></td>
                    </tr>
                    <tr>
                        <td>证件正面</td>
                        <td>
                        <input type="file"  name="file4" id="frout" style="width:150px;" class="d-none"   >
                        <input type="button" class="btn btn-default" onclick="frout1()" value="上传文件" style="width:150px;">
                        </td>
                        <td>证件反面</td>
                        <td WIDTH="100px">
                            <input name="file2" id="side" type="file" class="d-none" ng-model="entity.side">
                            <input type="button" class="btn btn-default" onclick="side1()" value="上传文件" style="width:150px;">
                        </td>
                    </tr>
                    <tr id="template">
                        <td>护照</td>
                        <td WIDTH="100px"><input name="file3" id="book" class="d-none" type="file" ng-model="entity.book">
                            <input type="button" class="btn btn-default" onclick="book1()" value="上传文件" style="width:150px;">
                        </td>
                        <td>协议年限</td>
                        <td id="span" WIDTH="100px"><input name="year1"  type="date"   id="year1"><input name="year2" class="d-none" id="year2" type="date" ng-model="entity.year1"><input id="cdate" class="d-none" name="cdate" type="date">
                            </td>
                    </tr>
                    <tr>
                        <td COLSPAN="4" class="text-center">
                            <!--<button style="margin-left:240px" ng-click="add()">提交注册</button>-->
                            <input type="submit" value="提交注册!" class="btn btn-outline-secondary"  style="width: 200px">
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
<script>
    var BTN1 = document.getElementById('doc');//头像



    $(function () {
        /*创建日期*/
        var year=new Date();
        //格式化日，如果小于9，前面补0
        var day = ("0" + year.getDate()).slice(-2);
        //格式化月，如果小于9，前面补0
        var month = ("0" + (year.getMonth() + 1)).slice(-2);
        //拼装完整日期格式
        var cdate = year.getFullYear()+"-"+(month)+"-"+(day) ;
        var year1=year.getFullYear()+".01.01";
        var year2=(year.getFullYear()+2)+".12.31";
        $("#cdate").val(cdate);
        $("#year1").val(year1);
        $("#year2").val(year2);
        $("#span").text(year1+"-"+year2);
    })
    
    function img(){
        BTN1.click();
    };

    
    function frout1(){
        $("#frout").click();
    };
    function side1(){
        $("#side").click();
    };
    function book1(){
        $("#book").click();
    };

    function setImagePreview(avalue) {
        var docObj = document.getElementById("doc");
        var imgObjPreview = document.getElementById("preview");
        if(docObj.files && docObj.files[0])
        {
            //火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '150px';
            imgObjPreview.style.height = '180px';
            //imgObjPreview.src = docObj.files[0].getAsDataURL();
            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        }
        else
        {
            //IE下，使用滤镜
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = document.getElementById("localImag"); //必须设置初始大小
            localImagId.style.width = "150px";
            localImagId.style.height = "180px"; //图片异常的捕捉，防止用户修改后缀来伪造图片
            try {
                localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
            } catch(e) {
                alert("您上传的图片格式不正确，请重新选择!");
                return false;
            }
            imgObjPreview.style.display = 'none';
            document.selection.empty();
        }
        return true;
    }
</script>
</body>
</html>